<template>
  <div class="wrap">
    <div class="title">新增账号</div>
    <div class="form">
      <div class="form-item">
        <label for="issuer">备注</label>
        <input
          type="text"
          id="remark"
          v-model="form.remark"
          placeholder="remark"
        />
      </div>
      <div class="form-item">
        <label for="account">账号</label>
        <input
          type="text"
          id="account"
          v-model="form.account"
          placeholder="账号"
        />
      </div>
      <div class="form-item">
        <label for="pass">密钥</label>
        <input type="text" id="pass" v-model="form.pass" placeholder="密钥" />
      </div>
      <div class="form-item">
        <label for="pass">账号(xpath)</label>
        <input type="text" v-model="form.selectorAccount" placeholder="账号" />
      </div>
      <div class="form-item">
        <label for="pass">密钥(xpath)</label>
        <input type="text" v-model="form.selectorPass" placeholder="账号" />
      </div>
      <div class="form-item">
        <label for="submit">提交按钮(xpath)</label>
        <input
          type="text"
          id="submit"
          v-model="form.submit"
          placeholder="css选择器，自动点击提交按钮，例如：button[type='submit']"
        />
      </div>
      <div class="form-item-tool">
        <button class="button button-primary" @click="addOtp">添加</button>
        <button class="button button-secondary" @click="cancel">取消</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { getStorage, setStorage } from '../utils/storage';
import toast from '../components/toast';
import { PassItem } from './type';
const router = useRouter();
const form = reactive<PassItem>({
  account: '',
  pass: '',
  selectorAccount: '',
  selectorPass: '',
  remark: '',
  submit: '',
  id: '',
});
const addOtp = () => {
  if (!form?.account || !form.pass) {
    toast({
      message: '请填写完整信息',
      duration: 2000,
    });
    return;
  }
  getStorage('passList', (result) => {
    if (!result) {
      result = [];
    }
    if (form?.id) {
      result = result.map((item: any) => {
        if (item.id === form?.id) {
          return { ...form };
        }
        return item;
      });
      setStorage('passList', result);
      router.push('/pass');
    } else {
      result.push({ ...form, id: crypto.randomUUID() });
      setStorage('passList', result);
      router.push('/pass');
    }
  });
};
const cancel = () => {
  router.push('/pass');
};
onMounted(() => {
  console.log(router.currentRoute.value);
  const id = router.currentRoute.value.query.id;
  if (id) {
    getStorage('passList', (result) => {
      Object.assign(
        form,
        result.find((item: PassItem) => item.id === id),
      );
    });
  }
});
</script>

<style scoped lang="scss">
@use '../vars.scss';

.wrap {
  width: 60%;
  .title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
  }
}
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  .form-item {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    label {
      width: 100px;
    }
  }
  .form-item-tool {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
  }
}
</style>
